<template>
  <view class="discount-popup-container">
    <u-popup :show="onShow" mode="bottom" border-radius="20">
      <view class="discount-popup-header">
        <text class="discount-title">选择折扣方式</text>
        <u-icon size="20" name="close" @click="handleClose" />
      </view>
      <view class="discount-options">
        <view class="discount-option" @click="handleClose(2)">
          <text class="discount-option-title">平台积分抵扣</text>
          <text class="discount-option-detail">使用{{ formData.comunityIntegralUse }}分可抵扣￥{{ formData.comunityIntegralDeduction }}</text>
        </view>
        <!-- <view class="discount-option" @click="handleClose(1)">
					<text class="discount-option-title">消费补贴抵扣</text>
					<text class="discount-option-detail">消费补贴:{{formData.consumeIntegralUse}}</text>
				</view> -->
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default: () => {},
    },
    /** 1.订单支付 2.其他 */
    type: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      onShow: false,
      discountData: {
        /** 物业地址 */
        frontComunityInteralPoVoList: [],
      },
    };
  },
  methods: {
    /** 打开弹窗 */
    handleOpen() {
      this.onShow = true;
    },
    handleClose(type) {
      if (type === 2) {
        this.getInfo(type);
      }
      this.onShow = false;
    },
    getInfo(type) {
      if (type === 2) {
        this.$emit("getInfo", {
          type: 2,
          typeName: "平台积分抵扣",
          discount: this.formData.comunityIntegralUse,
          price: this.formData.comunityIntegralDeduction,
          address: "",
        });
      } else {
        this.$emit("getInfo", {
          type: 0,
          typeName: "无抵扣",
          discount: 0,
          price: 0,
        });
      }
    },
  },
};
</script>

<style>
.discount-popup-container {
  position: relative;
  z-index: 998;
}

.discount-popup-header {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
}

.discount-title {
  font-size: 32rpx;
  font-weight: bold;
}

.discount-options {
  padding: 20rpx;
  background-color: #fff;
}

.discount-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  background-color: #f9f9f9;
}

.discount-option-title {
  font-size: 28rpx;
}

.discount-option-detail {
  font-size: 24rpx;
  color: #999;
}
</style>
